第一次串資料

雖然先前接觸多次 1999 市政儀表板，但我第一次串開放資料用的不是 Open1999，而是高雄市電動機車充電站

前面有提到開放資料有很多是有問題的，因此在選的時候也需要過濾一些。這份資料看起來很完整，也用 JSON 格式。
大概長這樣：

[
    {
        "Kind": "公共充電站",
        "Charge": "免費",
        "Location": "新興區公所 ",
        "Address": " 高雄市新興區中正三路34號1樓(室內停車場)"
      },
      {
        "Kind": "公共充電站",
        "Charge": "免費",
        "Location": "高雄市民權停車場(機車停車場) ",
        "Address": " 高雄市新興區民權一路221號"
      },
      {
        "Kind": "公共充電站",
        "Charge": "投幣式",
        "Location": "三元機車行",
        "Address": "高雄市大寮區義和村鳳屏二路294號"
      },
      {
        "Kind": "公共充電站",
        "Charge": "免費",
        "Location": "億昌機車行 ",
        "Address": " 高雄市新興區文昌里16鄰和平一路269號"
      }  
] 

從 HTML 到 CSS，差別最大的就是要多新增一個檔案：all.js

這是我畫的非常草圖，畢竟這次目標不是設計而是套資料。
總之網頁要可以呈現所有的資料，也要可以篩選是投幣還是免費（搜尋我就沒做了，當時剛好遇到一些瓶頸）

第一步當然是接 JSON 資料

$.getJSON('你要的資料網址', function (資料陣列的名字，自己取) 
{
'裡面放要做的事情，例如你想要呈現的資料、按鈕按下去要幹嘛之類的'
｝

如果你想做的事情是呈現每一筆資料：

data.forEach((x) => {
		document.getElementById('你要放資料的地方名稱，例如 content').innerHTML +=
        x.Charge+x.Location+x.Address;
	});

毫無疑慮的，順利呈現所有資料，但一點排版都沒有。因此在這個時候還是需要加上 HTML 標籤，幫助排版。由於每筆資料的排版都一是一樣的（充電收費、地點、地址），因此在增加 HTML 標籤的時候也只需要在 data forEach 裡面加，這樣就可以同時套用到每一筆資料

$.getJSON('https://data.kcg.gov.tw/dataset/a98754a3-3446-4c9a-abfc-58dc49f2158c/resource/48d4dfc4-a4b2-44a5-bdec-70f9558cd25d/download/yopendata1070622opendatajson-1070622.json', function (data) {
	//data is the JSON string
	data.forEach((x) => {
		document.getElementById('content_list').innerHTML +=
			'<div class="list">'
			+ '<div class="charge">' + x.Charge + '</div>'
			+ '<div class="location">' + x.Location + '</div>'
			+ '<div class="address">' + x.Address + '</div>'
			+ '</div>';
	});

加完的排版就整齊多了，也才是人類可讀的 XD

✔️呈現資料完成，接下來就是篩選了。這邊卡關滿久的，需要的邏輯比較多。
首先 checkbox 的狀態分為有勾跟沒勾，若設有勾 =true、沒勾 =false，那麼總共會有四種呈現方式

{
    [true, true],
    [true, false],
    [false, true],
    [false, false],
}

因此在寫程式的時候也需要寫四種可能發生的狀況。
首先要先讀取兩個 checkbox 裡的狀態

let checkState1 = document.getElementById("check1").checked;
let checkState2 = document.getElementById("check2").checked;

第一種是兩種都勾，會呈現全部，不需要做任何過濾，就跟前面一樣

接下來要做的是投幣勾、免費不勾
邏輯是：要先呈現全部後，清空免費的

else if{
document.getElementById('content_list').innerHTML = "";
			data.forEach((x) => {
				if (x.Charge === "免費") {
					document.getElementById('content_list').innerHTML +=
						'<div class="list">'
						+ '<div class="charge">' + x.Charge + '</div>'
						+ '<div class="location">' + x.Location + '</div>'
						+ '<div class="address">' + x.Address + '</div>'
						+ '</div>';
				}
})

依此類推，把變數改成投幣：要先呈現全部後，清空投幣的的。

而不呈現就更簡單了，innerHTML 裡什麼都不要放就好囉。

else if(checkState1 === false && checkState2 === false){
	document.getElementById('content_list').innerHTML = "";
}

嗯嗯，成功做完一頁可以篩選哪裡有免費充電站的網頁了，真棒。